<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="../../../css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div class="layui-form layuimini-form">
    <div class="layui-form-item">
        <label class="layui-form-label">选择目录</label>
        <div class="layui-input-block">
            <select name='menu1' id='menu1' lay-filter='menu1'></select>
        </div>
        <div class="layui-input-block" id="div-menu2" style="display: none">
            <select name="menu2" id="menu2" lay-filter='menu2'></select>
        </div>
        <div class="layui-input-block" id="div-menu3" style="display: none">
            <select name="menu3" id="menu3"></select>
        </div>
        <div class="layui-input-block" style="display: none">
            <input type="text" name="menu1Value" value="-1" class="layui-input" id="menu1Value">
            <input type="text" name="menu2Value" value="-1" class="layui-input" id="menu2Value">
            <input type="text" name="menu3Value" value="-1" class="layui-input" id="menu3Value">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选择图标</label>
        <div class="layui-form-item" align="center">
            <input type="text" id="iconPicker" name="iconPicker" lay-filter="iconPicker" class="hide">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">输入菜单名称</label>
        <div class="layui-input-block">
            <input type="text" name="title" placeholder="请输入菜单名称" value="" class="layui-input" id="title"
                   autocomplete="off" lay-verify="required" lay-reqtext="名称不能为空">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">输入页面路径</label>
        <div class="layui-input-block">
            <input type="text" name="href" placeholder="请输入页面路径" value="" class="layui-input" id="href"
                   autocomplete="off">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block">
            <textarea name="remark" class="layui-textarea" placeholder="请输入备注信息"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
</div>

<script src="../../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['form', 'table', 'iconPickerFa'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$,
            table = layui.table,
            iconPickerFa = layui.iconPickerFa;
        $(function () {
            var url = location.search;
            var i = url.indexOf("=");
            var id = url.substring(i + 1);
            $.post("/menu/selectParent.do", {id: id}, function (data) {
                if (data.code == 1) {
                    alert(data.msg);
                    var iframeIndex = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(iframeIndex);
                } else if (data.code == 0) {
                    var nodes = data.data.nodes;
                    var menuList = data.data.menuList;
                    sessionStorage.setItem("menuList", JSON.stringify(menuList));
                    switch (nodes.length) {
                        case 0:
                            $("#div-menu1").css("display", "block");
                            $("#div-menu2").css("display", "none");
                            $("#div-menu3").css("display", "none");
                            var menu1 = showSelect(menuList, -1, 1);
                            $("#menu1").html(menu1);
                            form.render('select');
                            break;
                        case 1:
                            $("#div-menu1").css("display", "block");
                            $("#div-menu2").css("display", "block");
                            $("#div-menu3").css("display", "none");
                            $("#menu1Value").attr("value", nodes[0]);
                            var menu1 = showSelect(menuList, nodes[0], 1);
                            var menu2 = showSelect(menuList, -1, nodes[0]);
                            $("#menu1").html(menu1);
                            $("#menu2").html(menu2);
                            form.render('select');
                            break;
                        case 2:
                            $("#div-menu1").css("display", "block");
                            $("#div-menu2").css("display", "block");
                            $("#div-menu3").css("display", "block");
                            $("#menu1Value").attr("value", nodes[0]);
                            $("#menu2Value").attr("value", nodes[1]);
                            var menu1 = showSelect(menuList, nodes[0], 1);
                            var menu2 = showSelect(menuList, nodes[1], nodes[0]);
                            var menu3 = showSelect(menuList, -1, nodes[1]);
                            $("#menu1").html(menu1);
                            $("#menu2").html(menu2);
                            $("#menu3").html(menu3);
                            form.render('select');
                            break;
                        case 3:
                            $("#div-menu1").css("display", "block");
                            $("#div-menu2").css("display", "block");
                            $("#div-menu3").css("display", "block");
                            $("#menu1Value").attr("value", nodes[0]);
                            $("#menu2Value").attr("value", nodes[1]);
                            $("#menu3Value").attr("value", nodes[2]);
                            var menu1 = showSelect(menuList, nodes[0], 1);
                            var menu2 = showSelect(menuList, nodes[1], nodes[0]);
                            var menu3 = showSelect(menuList, nodes[2], nodes[1]);
                            $("#menu1").html(menu1);
                            $("#menu2").html(menu2);
                            $("#menu3").html(menu3);
                            form.render('select');
                            break;
                    }
                }
                // sessionStorage.setItem("menuList", JSON.stringify(data.data));
                // var menu1 = "<option value='-1'>请选择</option>";
                // for (var i = 0; i < data.data.length; i++) {
                //     var po = data.data[i];
                //     if (po.pid == 1)
                //         menu1 += "<option value='" + po.symId + "'>" + po.title + "</option>";
                // }
                // $("#menu1").html(menu1);
                // form.render('select');
            }, "json")
        });
        iconPickerFa.render({
            // 选择器，推荐使用input
            elem: '#iconPicker',
            // fa 图标接口
            url: "../../../lib/font-awesome-4.7.0/less/variables.less",
            // 是否开启搜索：true/false，默认true
            search: true,
            // 是否开启分页：true/false，默认true
            page: true,
            // 每页显示数量，默认12
            limit: 12,
            // 点击回调
            click: function (data) {
                console.log(data);
            },
            // 渲染成功后的回调
            success: function (d) {
                console.log(d);
            }
        });
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            var menus = data.field.menu1Value + "," + data.field.menu2Value + "," + data.field.menu3Value;
            $.ajax({
                type: "post",
                url: "/menu/add.do",
                data: {
                    icon: data.field.iconPicker,
                    href: data.field.href,
                    remark: data.field.remark,
                    title: data.field.title,
                    menus: menus
                },
                success: function (data) {
                    if (data.code == 0) {
                        alert(data.msg);
                        var iframeIndex = parent.layer.getFrameIndex(window.name);
                        //刷新父级页面
                        parent.location.reload();
                        parent.layer.close(iframeIndex);
                    } else if (data.code == 1) {
                        alert(data.msg);
                    }
                }
            });
            return false;
        });
        form.on('select(menu1)', function (data) {
            $("#div-menu2").css("display", "none");
            $("#div-menu3").css("display", "none");
            var list = JSON.parse(sessionStorage.getItem("menuList"));
            var index = data.value;
            $("#menu1Value").attr("value", index);
            //判断记录是否有子目录
            var re = false;
            var menu2 = "<option value='-1'>请选择</option>";
            for (var i = 0; i < list.length; i++) {
                var po = list[i];
                if (po.pid == index) {
                    menu2 += "<option value='" + po.symId + "'>" + po.title + "</option>";
                    re = true;
                }
            }
            $("#menu2").html(menu2);
            //有子目录则显示子目录下拉框。没有则隐藏
            if (re) {
                $("#div-menu2").css("display", "block");
                $("#menu2Value").attr("value", -1);
            } else
                $("#div-menu2").css("display", "none");
            form.render('select');
        });
        form.on('select(menu2)', function (data) {
            var list = JSON.parse(sessionStorage.getItem("menuList"));
            var index = data.value;
            $("#menu2Value").attr("value", index);
            //判断记录是否有子目录
            var re = false;
            var menu3 = "<option value='-1'>请选择</option>";
            for (var i = 0; i < list.length; i++) {
                var po = list[i];
                if (po.pid == index) {
                    re = true;
                    menu3 += "<option value='" + po.symId + "'>" + po.title + "</option>";
                }
            }
            $("#menu3").html(menu3);
            //有子目录则显示子目录下拉框。没有则隐藏
            if (re) {
                $("#div-menu3").css("display", "block");
                $("#menu3Value").attr("value", -1);
            } else
                $("#div-menu3").css("display", "none");
            form.render('select');
        });
        form.on('select(menu3)', function (data) {
            var index = data.value;
            $("#menu3Value").attr("value", index);
        });

        function showSelect(menuList, node, parent) {
            var menu;
            if (node == -1) {
                menu = "<option value='-1' selected='selected'>请选择</option>";
                menu += selectForCircle(menuList, node, parent)
            } else {
                menu = "<option value='-1'>请选择</option>";
                menu += selectForCircle(menuList, node, parent)
            }
            return menu;
        }

        function selectForCircle(menuList, node, parent) {
            var str = "";
            for (var i = 0; i < menuList.length; i++) {
                var po = menuList[i];
                if (po.pid == parent) {
                    if (po.symId == node)
                        str += "<option value='" + po.symId + "' selected='selected'>" + po.title + "</option>";
                    str += "<option value='" + po.symId + "'>" + po.title + "</option>";
                }
            }
            return str;
        }

        //sleep函数
        function sleep(d) {
            for (var t = Date.now(); Date.now() - t <= d;) ;
        }
    });
</script>
</body>
</html>